<template>
	<view class="bg-gray">
		<view class="swipecarouselback">
			<image src="https://www.haopengsong.xyz/static/arrleft.png" class="arricon" @click="jump"></image>
			<carousel :res="carouselImage" class="bgshare" height='500' />
		</view>
		<view class="width">
			<view class="linebox">
				<view class="bg-white commonbg">
					<view class="font15 flex-row-between bold">
						{{info.sliceName}}
					</view>
					<view class="color6 fontbottom">
						{{info.remark}}
					</view>
				</view>
				<view class="bg-white boxin">
					<view class="boxitem">
						预约时段
						<view class="yuyue">
							<view v-for='(item,index) in changciList' :key='index' 
								class="time font12 flex-row-between">
								{{ item.time }}
								<view class="yellow">￥0</view>
								<view class="shape font12">{{index}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<bottomsubmit title='确认支付' @pay='submit'></bottomsubmit>
	</view>
</template>

<script>
	import tpl_banner from "@/pages/tabbar/roperty/template/tpl_banner"; 
	import { getAudiovisualDetail, placeOrder } from "@/api/movie";
	import bottomsubmit from "@/components/huashuiwan/bottomsubmit.vue"; 
	export default {
		components: {
			carousel: tpl_banner,
			bottomsubmit
		},
		data(){
			return {
				carouselImage:[
					{ name:'https://www.haopengsong.xyz/static/movie/bgdetail.png'}
				],
				info:{},
				changciList:[
					{ time:'07:00', price:'15' },
					{ time:'10:00', price:'25'  },
					{ time:'13:00', price:'15'  },
					{ time:'15:00', price:'35'  },
					{ time:'19:00', price:'15'  }
			]
			}
		},
		onLoad(options) {
			this.getDetail(options.id)
		},
		methods:{
			jump(res){
				// 返回上一页
				uni.navigateBack({
				    delta: 1 // 默认值是1，表示返回的页面层数
				});
			},
			getDetail(id){
				getAudiovisualDetail({id:id}).then(res=>{
					this.info = res
					this.carouselImage[0].name = res.images
				})
			},
			submit(){
				let data = {
					id:this.info.id
				}
				 placeOrder(data).then(res=>{
					 uni.showToast({
					 	title: "预约成功！",
					 	icon: "none",
					 	duration: 1500,
					 });
					 setTimeout(function () {
						 uni.navigateTo({
						 	url:'/pages/myorder/index'
						 })
					 },2000)
				 })
			},
		}
	}
</script>

<style lang="scss" scoped>
 .width{
	 position: relative;
	 top:-40px;
	 padding-bottom: 50px;
 }
 .commonbg{
	 margin: 0;
 }
 .boxin,.linebox{
	 margin-top: 10px;
 }
 .time{
	 width: 100%;
 }
</style>